import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { authAPI, roleAPI } from '../services/api';
import ApiDiagnosticTool from './ApiDiagnosticTool';
import './styles.css';

function Register() {
  const [email, setEmail] = useState('');
  const [userid, setUserid] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    // 验证两次密码输入是否一致
    if (password !== confirmPassword) {
      setError('两次输入的密码不一致');
      return;
    }
    
    setLoading(true);
    
    try {
      console.log('开始注册流程...');
      
      // 构建注册数据
      const registerData = {
        email,
        password,
        userid: email, // 如果没有单独输入userid，则使用email作为userid
        // 去掉可能不需要的字段，减少错误可能性
        // createdAt: new Date().toISOString(),
        deleteFlag: 0
      };
      // 调用注册API
      const response = await authAPI.register(registerData);
      console.log('注册API响应:', response);
      
      // 处理响应
      if (response) {
        // 获取返回的userid
        const responseUserid = response.result.userid;
        const finalUserId = responseUserid;
        
        console.log('注册成功，开始保存用户角色...');
        
        // 注册成功后，立即保存用户角色为 "USER"
        try {
          const roleData = {
            userId: finalUserId,
            roleType: "USER"
          };
          
          const roleResponse = await roleAPI.saveUserRole(roleData);
          console.log('角色保存响应:', roleResponse);
          
          if (roleResponse) {
            console.log('用户角色保存成功');
          } else {
            console.warn('角色保存可能失败，但继续注册流程');
          }
        } catch (roleError) {
          console.error('保存用户角色时出错:', roleError);
          // 角色保存失败不应该阻止注册流程，只是记录错误
        }
        
        setLoading(false);
        
        // 注册成功后跳转到用户信息设置页面，并传递必要的数据
        navigate('/login', {
          state: {
            userid: finalUserId,
            email,
            message: '注册成功！请登录您的账户'
          }
        });
      } else {
        throw new Error('注册失败：未收到有效响应');
      }
      
    } catch (err) {
      console.error('注册出错:', err);
      
      // 更详细的错误信息处理
      let errorMessage = '注册失败: ';
      if (err.response) {
        // 服务器响应了错误
        errorMessage += `服务器返回错误(${err.response.status}): ${err.response.data?.message || JSON.stringify(err.response.data) || ''}`;
        console.error('错误响应数据:', err.response.data);
      } else if (err.request) {
        // 请求发送但没有收到响应
        errorMessage += '无法连接到服务器，请检查网络连接或服务器是否运行';
        console.error('请求未收到响应:', err.request);
      } else {
        // 请求设置有问题
        errorMessage += err.message || '未知错误';
      }
      
      setError(errorMessage);
      setLoading(false);
    }
  };

  const navigateToLogin = () => {
    navigate('/login');
  };

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h2>注册账号</h2>
        
        {error && <div className="error-message">{error}</div>}
        
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="email">邮箱</label>
            <input
              type="email"
              id="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              placeholder="请输入您的邮箱"
              autoComplete="email"
            />
          </div>
          
          
          <div className="form-group">
            <label htmlFor="password">设置密码</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="请设置密码"
              autoComplete="new-password"
              minLength="6"
            />
          </div>
          
          <div className="form-group">
            <label htmlFor="confirmPassword">确认密码</label>
            <input
              type="password"
              id="confirmPassword"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              placeholder="请再次输入密码"
              autoComplete="new-password"
              minLength="6"
            />
          </div>
          
          <div className="form-actions">
            <button 
              type="submit" 
              className="btn-primary"
              disabled={loading}
            >
              {loading ? '注册中...' : '注册'}
            </button>
            
            <button 
              type="button" 
              className="btn-secondary"
              onClick={navigateToLogin}
            >
              返回登录
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Register;
